<template>
    <a-card hoverable>
        <a-spin v-if="spinning" class="load"></a-spin>
        <a-row id="topRow">
            <!-- 监控服务 -->
            <a-col :xs='24' :sm='12' :md='12' :lg='8' :xl='4' style="text-align: center;">
                <a-popover :title="$t('List_details')" placement="bottom">
                    <template #content>
                        <span class='block'>{{ $t('Processes-num') }}：<span>{{ allstatus ? allstatus.mon.quorum_names.length :
                            '' }}</span></span>
                        <span class='block'>{{ $t('Master-node') }}：
                            <a-tooltip :title="allstatus ? allstatus.mon.quorum_names[0] : ''">
                                {{ allstatus ? allstatus.mon.quorum_names[0] : '' }}
                                <!-- <span v-if="allstatus.mon.quorum_names.length > 20"></span>
                            <span v-else>{{ allstatus ? allstatus.mon.quorum_names[0].substring(0, 20) : '' }}</span> -->
                            </a-tooltip>
                        </span>
                        <span class='block'>{{ $t('Active-time') }}：
                            <a-tooltip :title="allstatus ? allstatus.mon.quorum_names.join(',') : ''">
                                {{ shortNode.substring(0, 36) }}
                            </a-tooltip>
                        </span>
                    </template>
                    <img v-if="allstatus == ''" ondragstart="return false" oncontextmenu="return false"
                        src='../../../static/images/png/ic_Monitorstatus_unusable.png' style="margin: 0.5rem 0;"
                        class="top-status-img" alt="monitor_img" />
                    <img v-else ondragstart="return false" oncontextmenu="return false"
                        :src='allstatus.mon.status | isstatus' style="margin: 0.5rem 0;" class="top-status-img"
                        alt="status_img" />
                    <br /><b>{{ $t('Monitoring-service') }}</b>
                </a-popover>
            </a-col>
            <!-- 管理服务 -->
            <a-col :xs='24' :sm='12' :md='12' :lg='8' :xl='4' style="text-align: center;">
                <a-popover :title="$t('List_details')" placement="bottom">
                    <template #content>
                        <span class='block'>{{ $t('Master-node') }}：<span>{{ allstatus ? allstatus.mgr.master :
                            '' }}</span></span>
                        <span class='block'>{{ $t('Slave-node') }}：<span>{{ allstatus ? allstatus.mgr.standby :
                            '' }}</span></span>
                        <span class='block'>{{ $t('Active-time') }}：<span>{{ allstatus ? allstatus.mgr.age : '' }}</span></span>
                    </template>
                    <img v-if="allstatus == ''" ondragstart="return false" oncontextmenu="return false"
                        src='../../../static/images/png/ic_Monitorstatus_unusable.png' style="margin: 0.5rem 0;"
                        class="top-status-img" alt="monitor_img" />
                    <img v-else ondragstart="return false" oncontextmenu="return false"
                        :src='allstatus.mgr.status | isman' style="margin: 0.5rem 0;" class="top-status-img"
                        alt="status_img" />
                    <br /><b>{{ $t('Management-service') }}</b>
                </a-popover>
            </a-col>
            <!-- OSD -->
            <a-col :xs='24' :sm='12' :md='12' :lg='8' :xl='4' style="text-align: center;">
                <a-popover :title="$t('List_details')" placement="bottom">
                    <template #content>
                        <span class='block'>{{ $t('Amount') }}：<span>{{ allstatus ? allstatus.osd.num : '' }}</span></span>
                        <span class='block'>IN：<span>{{ allstatus ? allstatus.osd.in : '' }}</span></span>
                        <span class='block'>UP：<span>{{ allstatus ? allstatus.osd.up : '' }}</span></span>
                    </template>
                    <img v-if="allstatus == ''" ondragstart="return false" oncontextmenu="return false"
                        src='../../../static/images/png/ic_Monitorstatus_unusable.png' style="margin: 0.5rem 0"
                        alt="monitor_img" class="top-status-img" />
                    <img v-else ondragstart="return false" oncontextmenu="return false" :src='allstatus.osd.status | isosd'
                        style="margin: 0.5rem 0" alt="status_img" class="top-status-img" />
                    <br /><b>OSD</b>
                </a-popover>
            </a-col>
            <!-- 文件存储 -->
            <a-col :xs='24' :sm='12' :md='12' :lg='8' :xl='4' style="text-align: center;">
                <a-popover :title="$t('Status')" placement="bottom">
                    <template #content>
                        <h2
                            :class="allstatus ? allstatus.cephfs.status == 0 ? 'green' : allstatus.filestatus == 1 ? 'red' : 'grey' : ''">
                            {{ allstatus ? allstatus.cephfs.status == 0 ? $t('Normal') : allstatus.cephfs.status == 1 ?
                                $t('Abnormal') : $t('Unusable') : '' }}</h2>
                    </template>
                    <img v-if="allstatus == ''" ondragstart="return false" oncontextmenu="return false"
                        src='../../../static/images/png/ic_Monitorstatus_unusable.png' style="margin: 0.5rem 0"
                        class="top-status-img" alt="monitor_img" />
                    <img v-else ondragstart="return false" oncontextmenu="return false"
                        :src='allstatus.cephfs.status | isfile' style="margin: 0.5rem 0" class="top-status-img"
                        alt="status_img" />
                    <br /><b>{{ $t('File-storage') }}</b>
                </a-popover>
            </a-col>

            <!-- 对象存储 -->
            <a-col :xs='24' :sm='12' :md='12' :lg='8' :xl='4' style="text-align: center;">
                <a-popover :title="$t('Status')" placement="bottom">
                    <template #content>
                        <h2
                            :class="allstatus ? allstatus.rgw.status == 0 ? 'green' : allstatus.rgw.status == 1 ? 'red' : 'grey' : ''">
                            {{ allstatus ? allstatus.rgw.status == 0 ? $t('Normal') : allstatus.rgw.status == 1 ?
                                $t('Abnormal') : $t('Unusable') : '' }}</h2>
                    </template>
                    <img v-if="allstatus == ''" ondragstart="return false" oncontextmenu="return false"
                        src='../../../static/images/png/ic_Monitorstatus_unusable.png' style="margin: 0.5rem 0"
                        class="top-status-img" alt="monitor_img" />
                    <img v-else ondragstart="return false" oncontextmenu="return false" :src='allstatus.rgw.status | isobj'
                        style="margin: 0.5rem 0" class="top-status-img" alt="status_img" />
                    <br /><b>{{ $t('Object-storage') }}</b>
                </a-popover>
            </a-col>

            <!-- iSCSI -->
            <a-col :xs='24' :sm='12' :md='12' :lg='8' :xl='4' style="text-align: center;">
                <a-popover :title="$t('Status')" placement="bottom">
                    <template #content>
                        <h2
                            :class="allstatus ? allstatus.iscsi.status == 0 ? 'green' : allstatus.iscsi.status == 1 ? 'red' : 'grey' : ''">
                            {{ allstatus ? allstatus.iscsi.status == 0 ? $t('Normal') : allstatus.iscsi.status == 1 ?
                                $t('Abnormal') : $t('Unusable') : '' }}</h2>
                    </template>
                    <img v-if="allstatus == ''" ondragstart="return false" oncontextmenu="return false"
                        src='../../../static/images/png/ic_Monitorstatus_unusable.png' style="margin: 0.5rem 0"
                        class="top-status-img" alt="monitor_img" />
                    <img v-else ondragstart="return false" oncontextmenu="return false"
                        :src='allstatus.iscsi.status | isiscsi' style="margin: 0.5rem 0" class="top-status-img"
                        alt="status_img" />
                    <br /><b>iSCSI</b>
                </a-popover>
            </a-col>
        </a-row>
    </a-card>
</template>
<script>
import request from '@/request/request'

export default {
    name: 'Allstate',
    data() {
        return {
            allstatus: '',
            timeoutId: '',
            spinning: true,
            shortNode: '',  //省略的监控节点
        }
    },
    mounted() {
        this.getdata()
        this.timeoutId = setInterval(this.getdata, 90000); //定时刷新页面数据
    },
    destroyed() {
        clearInterval(this.timeoutId); //清除定时器
    },
    filters: {
        isstatus: function (val) {
            if (val === 1) return require('../../../static/images/png/ic_Monitorstatus_abnormal.png')
            else if (val == 0) return require('../../../static/images/png/ic_Monitorstatus_normal.png')
            else return require('../../../static/images/png/ic_Monitorstatus_unusable.png')
        },
        isman: function (val) {
            if (val === 1) return require('../../../static/images/png/ic_managerstatus_abnormal.png')
            else if (val == 0) return require('../../../static/images/png/ic_managerstatus_normal.png')
            else return require('../../../static/images/png/ic_managerstatus_unusable.png')
        },
        isosd: function (val) {
            if (val === 1) return require('../../../static/images/png/ic_OSDstatus-abnormal.png')
            else if (val == 0) return require('../../../static/images/png/ic_OSDstatus-normal.png')
            else return require('../../../static/images/png/ic_OSDstatus-unusable.png')
        },
        isfile: function (val) {
            if (val === 1) return require('../../../static/images/png/ic_filestatus-abnormal1.png')
            else if (val == 0) return require('../../../static/images/png/ic_filestatus-normal.png')
            else return require('../../../static/images/png/ic_filestatus-unusable.png')
        },
        isiscsi: function (val) {
            if (val === 1) return require('../../../static/images/png/ic_iSCSIstatus-abnormal2.png')
            else if (val == 0) return require('../../../static/images/png/ic_iSCSIstatus-normal.png')
            else return require('../../../static/images/png/ic_iSCSIstatus-unusable.png')
        },
        isobj: function (val) {
            if (val === 1) return require('../../../static/images/png/ic_Objectstorage_abnormal.png')
            else if (val == 0) return require('../../../static/images/png/ic_Objectstorage_normal.png')
            else return require('../../../static/images/png/ic_Objectstorage_unusable.png')
        }
    },
    methods: {
        getdata() {
            request('get', 'index/status/services').then(res => {
                if (res.data.flag == 1) {
                    this.model(res.data.id) //返回模板
                    this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                } else {
                    this.allstatus = res.data;
                    //this.shortNode = this.allstatus.mon.quorum_names.map(item => item.substring(0, 8) + '...').join(',')
                    this.shortNode = this.allstatus.mon.quorum_names[0] + ',' + this.allstatus.mon.quorum_names[1]
                }
            }).catch(err => {

            }).finally(() => {
                this.spinning = false;
            })
        }
    }
}
</script>
<style>
.status {
    font-size: 5em;
    text-align: center
}

.block span {
    color: var(--themeColor);
}

.icon_align {
    text-align: center !important;
    padding-bottom: 1rem;
}

.load {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

h2 {
    font-weight: 700
}

#topRow {
    display: flex;
    justify-content: center;
}
</style>
<style scoped>
.top-status-img {
    width: 98px;
    height: 103px;
}
</style>
